<template>
  <div id="user w">
    <div class="user-content">
      <topbar-item path="/home" class="item-img">
        <template v-slot:item>
          <div>
            <img src="~assets/img/logo/u2.png" alt="" />
            <img
              src="~assets/img/logo/img_5715(1).png"
              class="logoImg2"
              alt=""
            />
          </div>
        </template>
      </topbar-item>
      <topbar-item path="/home" class="item-log-in" v-show="isLogin">
        <template v-slot:item>
          <div>
            <p>返回首页</p>
          </div>
        </template>
      </topbar-item>
      <img src="~assets/img/bgc/loginLogo.png" alt="" class="loginLogo" />
      <div class="login-content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component
              :is="Component"
              :key="$route.id"
              v-if="$route.meta.keepAlive"
            />
          </keep-alive>
          <component :is="Component" v-if="!$route.meta.keepAlive" />
        </router-view>
      </div>
      <div class="login-text">
        <p class="login-text-up">
          联系电话：0514-82986933<span>联系Q Q：3008618924</span>
        </p>
        <p class="login-text-low">
          ©2020 上海仙帆互娱网络科技有限公司 版权所有<span
            >沪ICP备20009383号</span
          >
        </p>
      </div>
    </div>
  </div>
  <img src="~assets/img/bgc/login.jpg" alt="" class="bgcLogin" />
  <img src="~assets/img/bgc/loginShadow.png" alt="" class="bgcLogin" />
</template>

<script>
import TopbarItem from "components/common/topbar/TopbarItem.vue";

export default {
  name: "User",
  components: {
    TopbarItem,
  },
  data() {
    return {
      isLogin: true,
    };
  },
};
</script>

<style scoped>
.bgcLogin {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 9;
}
#user {
  position: relative;
}
.item-img {
  width: 270px;
  display: inline;
  float: left;
  cursor: pointer;
  position: absolute;
  top: -167px;
}
.logoImg2 {
  margin-left: 20px;
}
.user-content {
  position: relative;
  z-index: 99;
}
.item-log-in {
  line-height: 36px;
  font-size: 13px;
  height: 36px;
  width: 123px;
  position: absolute;
  right: 10px;
  top: -149px;
  background-color: rgb(250, 76, 29);
  border-radius: 18px;
  color: #f4f4f4;
  cursor: pointer;
  text-align: center;
}
.loginLogo {
  position: absolute;
  top: -114px;
  right: 41%;
  width: 240px;
  height: 71px;
}
.login-content {
  padding: 15px 56px;
  width: 400px;
  border: 1px solid rgb(250, 76, 29);
  border-radius: 10px;
  position: absolute;
  left: 33%;
  background-color: #ffffff;
}
.login-text {
  width: 543px;
  text-align: center;
  position: absolute;
  bottom: -600px;
  right: 28%;
  font-size: 13px;
  margin-bottom: 50px;
}
.login-text-up {
  margin-bottom: 10px;
}
.login-text span {
  margin-left: 15px;
}
</style>